How to use google material icons in website

Google icons are designed to be used with inline elements. The <i> and <span> elements are widely used for icons. Note: Material icons are 24px by default.

Some fonts are designed to show icons by using ligatures, for example by rendering the text home as a home image. To use a ligature icon, put its text in the ... Api · Styling · Examples

The new variable icon font set supports three styles: outlined, rounded, and sharp. All Material Symbols are newly drawn to be pixel-crisp and modernized.

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital ...

The original. Following Google's Material Design guidelines for system icons, MDI is our largest library, touting over 7200 unique icons!

These are two different official icon sets from Google, using the same underlying designs. Material Symbols is the current set, introduced in April 2022.

Browse through the icons below to find the one you need. The search field supports synonyms—for example, try searching for hamburger or logout..

這篇主要會透過CDN 引入Material Icons，並補足官方文件裡只有提到Filled 類別的引用方式，但沒有提到其他類別，像是Outlined、Rounded、Sharp、Two tone ...

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines. Getting icons · Icon font for the web · Icon images for the web · Icons for iOS

Material Symbols are our newest icons consolidating over 2500 glyphs in a single font file with a wide range of design variants.